<template>
    <el-card>
       <template #header>
           <div class="card-header">
               <span>新增影厅</span>
               <span @click="$router.push({name:'HallInfoList'})">返回列表</span>
           </div>
       </template>
       <!-- 表单 -->
       <!--进行表单验证 1.ref="adminInfoForm" -->
       <el-form ref="hallInfoForm" label-width="100px" :model="hallInfoData" :rules="hallInfoDataRules">
           <el-form-item label="影厅名称" prop="hall_name">
               <el-input placeholder="请输入影厅名称" v-model="hallInfoData.hall_name"></el-input>
           </el-form-item>
           <el-form-item label="影厅标签" prop="tags">
                <el-select v-model="hallInfoData.tags" 
                    multiple 
                    allow-create
                    default-first-option
                    :reserve-keyword="false"
                    placeholder="请选择影厅标签">
                    <el-option :label="item" :value="item" v-for="item in ['退','改签','折扣卡','4K厅','全景声','IMAX厅','小吃','杜比全景声']" :key="item"/>
                </el-select>
           </el-form-item>
           <el-form-item label="影厅地址" prop="address">
               <el-input placeholder="影厅地址" v-model="hallInfoData.address"></el-input>
           </el-form-item>
           <el-form-item label="影厅坐位" prop="sites">
               <div class="w-full mt-[-5px]">
                   <el-button-group>
                       <el-button type="info" :icon="CirclePlus" @click="addRow">添加一行</el-button>
                       <el-button type="success" :icon="DocumentCopy" @click="copyRow">复制一行</el-button>
                   </el-button-group>
                   <el-row class="mt-[10px]">
                       <el-col :span="12" class=" flex flex-row text-[14px]  items-center" >
                           <div class="w-[30px] h-[26px]" draggable="true" data-site="0" @dragstart="siteDrogStart($event,0)">
                               <img src="../../assets/img/02.png">
                           </div>
                           <span class="ml-[5px]">可选</span>
                       </el-col>
                       <el-col :span="12" class=" flex flex-row text-[14px]  items-center" >
                           <div class="w-[30px] h-[26px] border border-dashed border-gray-500" data-site="-1" draggable="true" @dragstart="siteDrogStart($event,-1)">
                           </div>
                           <span class="ml-[5px]">空位</span>
                       </el-col>
                   </el-row>
                   <ul class="site-list">
                       <li
                         @dragend.prevent="" 
                         @dragover.prevent=""
                         @drop.prevent="siteItemDrop($event,index)"
                         v-for="(item,index) in siteDetail" :key="index">
                            <el-icon color="red" :size="22" class="absolute right-[10px] cursor-pointer" @click="deleteCurrentRow(index)">
                               <CircleCloseFilled />
                            </el-icon>
                            <div
                               class="mr-[5px] w-[30px] h-[26px] border  border-gray-500"
                               :class="{'border-dashed':site==-1}"
                               v-for="(site,index2) in item" :key="index2">
                               <img src="../../assets/img/02.png" v-if="site==0" />
                            </div>
                        </li>
                   </ul>
               </div>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="submitForm">保存数据</el-button>
               <el-button type="danger" @click="resetForm">重置表单</el-button>
           </el-form-item>
       </el-form>
    </el-card>
</template>
<script>
import API from "../../utils/API/index.js";
import { ElMessage,ElMessageBox } from "element-plus";
import { DocumentCopy, CirclePlus,CircleCloseFilled } from "@element-plus/icons-vue";
export default {
    name: 'AddHallInfo',
    data() {
        //1.函数返回的对象，才是页面上的数据
        return {
            CirclePlus,
            DocumentCopy,
            CircleCloseFilled,
            hallInfoData: {
                hall_name:"",
                sites:"",
                tags:[],
                address:"",
            },
            //2.制定验证规则
            hallInfoDataRules: {
                hall_name:[
                    {required:true,message:"影厅名称不能为空",triiger:"blur"},
                ],
                tags:[
                     { required: true, message: "影厅标签不能为空", trigger: "blur" },
                ],
                address:[
                    { required: true, message: "影厅地址不能为空", trigger: "blur" },
                ],
                sites:[
                    { required: true, message: "影厅坐位不能为空", trigger: "blur" },
                ],
            }
        };
    },
    //负责页面事件
    methods:{
        
        submitForm() {
            //2.开始验证全部的表单数据
            this.$refs["hallInfoForm"].validate(async valid=>{
                if(valid) {
                    //验证成功，可以提交数据
                    try {
                        let resp = await API.adminInfo.add(this.adminInfoData).then(resp=>{}).catch(error=>{});
                        //console.log("成功",resp);
                        //ElMessage弹出一个成功的消息，然后跳转到列表页面 AdminInfoList
                        ElMessage.success("添加成功");
                        this.$router.replace({ name:"hallInfoList"});
                    } catch(error) {
                        // console.log("失败",error);
                        ElMessageBox.alert("添加失败","提示",{
                            type:"error",
                        });
                    }
                }
            });
        },
        resetForm() {
            //重置表单
            this.$refs["hallInfoForm"].resetFields();
        }
    },
};
</script>
<style lan="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>